import { Layout } from "antd";
import React, { useEffect, useState } from "react";
import styles from "./index.module.scss";
import CollapseButton from "@/components/CollapseButton";
import NavMenu from "@/components/NavMenu";
import TopBar from "@/components/TopBar";
import { Outlet } from "react-router-dom";
import NavBreadcrumb from "@/components/NavBreadcrumb";

const { Header, Sider, Content } = Layout;

const Home: React.FC = (props) => {
  // 控制侧边栏的开关
  const [collapsed, setCollapsed] = useState(false);

  return (
    <Layout className={styles.container}>
      <Sider collapsed={collapsed}>
        <NavMenu />
      </Sider>
      <Layout>
        <Header className={styles.header}>
          <CollapseButton
            collapsed={collapsed}
            onClick={() => setCollapsed(!collapsed)}
          />
          <TopBar/>
        </Header>
        <Content className={styles.content}>
          <NavBreadcrumb/>
          <main><Outlet/></main>
        </Content>
      </Layout>
    </Layout>
  );
};

export default Home;
